<template>
	<div class="commentGoods">
		<el-card shadow="hover">
			<div class="comment-list mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="80px" class="demo-form-inline">
					<el-row>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 25px">
									<el-button type="success" @click="toAdd">新增评论</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="keyWord" label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.keyWord" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="productId" label="商品ID" style="width: 100%">
								<el-input maxlength="200" v-model.number="searchForm.productId" placeholder="商品ID" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="status" label="状态" style="width: 100%">
								<el-select v-model="searchForm.status" clearable style="width: 100%">
									<el-option label="全部" :value="-1"></el-option>
									<el-option label="显示" :value="1"></el-option>
									<el-option label="隐藏" :value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="email" label="评价人" style="width: 100%">
								<el-input show-word-limit maxlength="200" v-model="searchForm.email" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="commentStartTime" label="评价时间" style="width: 100%">
								<DatePicker v-model:start="searchForm.commentStartTime" v-model:end="searchForm.commentEndTime" />
							</el-form-item>
							<el-form-item prop="commentEndTime"></el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="commentLikeStart" label="点赞数" style="width: 100%">
								<div class="commentLikeStart">
									<el-input-number v-model="searchForm.commentLikeStart" :min="null" :max="99999999" :controls="false" step-strictly clearable />
									<span style="margin: 0 10px">至</span>
									<el-input-number v-model="searchForm.commentLikeEnd" :min="null" :max="99999999" :controls="false" step-strictly clearable />
								</div>
							</el-form-item>
							<el-form-item prop="commentLikeEnd"></el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 25px">
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="index" label="序号" width="50">
					<template #default="scope">
						<span>{{ (page.current - 1) * 10 + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
				<el-table-column prop="productId" label="商品ID" show-overflow-tooltip />
				<el-table-column prop="email" label="评价人" show-overflow-tooltip />
				<el-table-column prop="star" label="评价星级" show-overflow-tooltip />
				<el-table-column prop="content" label="评价内容" show-overflow-tooltip />
				<el-table-column prop="createTime" label="评价时间" show-overflow-tooltip />
				<el-table-column prop="likeCount" label="点赞数" show-overflow-tooltip />
				<el-table-column label="状态">
					<template #default="scope">
						<span>{{ scope.row.status == 1 ? '显示' : '隐藏' }}</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="120px">
					<template #default="scope">
						<el-button text type="primary" @click="changeStatus(scope.row)">{{ scope.row.status === 1 ? '隐藏' : '显示' }}</el-button>
						<el-button text type="success" @click="toDetail(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog v-model="addDialogVisible" :title="title" width="600px">
			<el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="120px">
				<el-form-item prop="productId" label="商品名称">
					<ProdSelect v-model="ruleForm.productId" v-model:productName="ruleForm.productName" :disabled="!isAdd" style="width: 100%" />
				</el-form-item>
				<el-form-item prop="star" label="评价星级">
					<el-rate v-model="ruleForm.star" :disabled="!isAdd"></el-rate>
				</el-form-item>
				<el-form-item prop="createTime" label="评价时间">
					<el-date-picker v-model="ruleForm.createTime" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" :disabled="!isAdd" style="width: 100%">
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="email" label="评价人邮箱">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.email" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="content" label="评价人内容">
					<el-input show-word-limit maxlength="500" v-model="ruleForm.content" type="textarea" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="pics" label="评论图片">
					<ImgList v-model="ruleForm.picsArr" :disabled="true" />
				</el-form-item>
				<el-form-item prop="faceBook" label="Facebook地址">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.faceBook" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="ins" label="INS地址">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.ins" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="twitter" label="twitter地址">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.twitter" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="pinterest" label="pinterest地址">
					<el-input show-word-limit maxlength="200" v-model="ruleForm.pinterest" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="status" label="是否显示">
					<MySwitch v-model="ruleForm.status" :disabled="!isAdd" />
				</el-form-item>
				<el-form-item prop="isShow" label="是否显示在首页">
					<MySwitch v-model="ruleForm.isShow" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="updateComment(ruleForm)">修改</el-button>
					<el-button type="primary" @click="submit" v-if="isAdd">保 存</el-button>
					<el-button type="primary" @click="addDialogVisible = false" v-else>确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="CommentGoods">
import DatePicker from '/@/components/common/datePicker/DatePicker.vue';
import ProdSelect from '/@/components/common/prodSelect/ProdSelect.vue';
import CateSelector from '/@/components/common/CateSelector.vue';
import ImgList from './ImgList.vue';
import { useInit, useAdd } from './hook';
const { init, page, searchForm, tableData, changeStatus, updateComment } = useInit();
const { rules, ruleForm, isAdd, addDialogVisible, formRef, title, toAdd, toDetail, submit } = useAdd();
const route = useRoute();

const formDataRef = ref();
function resetForm() {
	formDataRef.value.resetFields();
}

const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};

onMounted(() => {
	searchForm.value.productId = Number(route.query.id) || undefined;
	init();
});
</script>
<style lang="scss" scoped>
.commentLikeStart {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.el-input-number {
		width: 100%;
	}
}
</style>
